var mydata = null;
var count = 0;
var timerCount = 0;
var myTimer = null;
var myTimer2 = null;

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});
var options = {
    chart: {
        type: 'spline',
        renderTo: 'main',
        // animation: Highcharts.svg,
        animation: false,
        backgroundColor:'#000000',
        marginRight: 20,

        events: {
            load: function () {//load表示的是在图表加载完时触发
                var series = this.series[0],
                    chart = this;

                myTimer = setInterval(function () {//setInterval是设置定时、延时,会不停的调用函数或者表达式

                    var x = (new Date()).getTime(); // current time

                    // console.log("ms:"+x)
                    // // var y = parseFloat(mydata[count].voltage);
                    var y = mydata[count].voltage;
                    // //画图。。。。
                    // //第三个参数代表删除第一个点
                    series.addPoint([x,y], true, true,false);
                    //activeLastPointToolip(chart);

                    timerCount++;

                    //计数
                    count++;
                    if (count == 1000)
                        count = 0;
                    // console.log(count);
                }, 20);//每过3s调用一次接口

            }
        }
    },

    title: {
        text: ''
    },

    xAxis: {
        type: 'datetime',
        tickPixelInterval: 100,//设置刻度间隔 。该参数对分类坐标轴无效。对于 Y 轴，其默认值是72，X 轴则是 100

        labels:{
            enabled:false
        },
        lineWidth: 0,  //去掉x轴线
        tickWidth: 0,   //去掉刻度
    },

    yAxis:{
        title:{
            text:''
        },
        labels:{
            enabled:false
        },
        gridLineWidth: 0,
        tickInterval:200,
        max:3000,
        min:1800
    },

    credits:{
        enabled:false
    },

    //数据点信息
    plotOptions: {
        series: {
            marker: {
                enabled: false, /*数据点是否显示，不显示则为一条线*/
            },
        },
    },

    legend: {
        enabled: false
    },

    series: [{
        name: '',
        color:'#33ff33',
        data: (function () {
            // console.info("mydata=" + mydata);
            // generate an array of random data
            var data = [],
                // time = 0,
                time = (new Date()).getTime(),
                i;
            for (i = -499; i <= 0; i += 1) {//这里是限制图表中最多显示500个点
                data.push({
                    // x: time,
                    x: time + i*20,
                    // x: -i,
                    y: 2000
                });
            }

            return data;
        }())
    }]
}

var options2 = {
    chart: {
        type: 'spline',
        renderTo: 'main',
        // animation: Highcharts.svg,
        animation: false,
        backgroundColor:'#000000',
        marginRight: 20,

        events: {
            load: function () {//load表示的是在图表加载完时触发
                var series = this.series[0],
                    chart = this;

                myTimer2 = setInterval(function () {//setInterval是设置定时、延时,会不停的调用函数或者表达式

                    var x = (new Date()).getTime(); // current time

                    // console.log("ms:"+x)
                    // // var y = parseFloat(mydata[count].voltage);
                    var y = mydata[count].voltage;
                    // //画图。。。。
                    // //第三个参数代表删除第一个点
                    series.addPoint([x,y], true, true,false);
                    //activeLastPointToolip(chart);

                    timerCount++;

                    //计数
                    count++;
                    if (count == 1000)
                        count = 0;
                    // console.log(count);
                }, 20);//每过3s调用一次接口

            }
        }
    },

    title: {
        text: ''
    },

    xAxis: {
        type: 'datetime',
        tickPixelInterval: 100,//设置刻度间隔 。该参数对分类坐标轴无效。对于 Y 轴，其默认值是72，X 轴则是 100

        labels:{
            enabled:false
        },
        lineWidth: 0,  //去掉x轴线
        tickWidth: 0,   //去掉刻度
    },

    yAxis:{
        title:{
            text:''
        },
        labels:{
            enabled:false
        },
        gridLineWidth: 0,
        tickInterval:200,
        max:3000,
        min:1800
    },

    credits:{
        enabled:false
    },

    //数据点信息
    plotOptions: {
        series: {
            marker: {
                enabled: false, /*数据点是否显示，不显示则为一条线*/
            },
        },
    },

    legend: {
        enabled: false
    },

    series: [{
        name: '',
        color:'#33ff33',
        data: (function () {
            // console.info("mydata=" + mydata);
            // generate an array of random data
            var data = [],
                // time = 0,
                time = (new Date()).getTime(),
                i;
            for (i = -499; i <= 0; i += 1) {//这里是限制图表中最多显示500个点
                data.push({
                    // x: time,
                    x: time + i*20,
                    // x: -i,
                    y: 2000
                });
            }

            return data;
        }())
    }]
}


$(function () {
    $.ajax({
        url : 'getAll',
        type : 'GET',
        dataType : 'json',
        async : false, //同步处理后面才能处理新添加的series
        success: function (resp) {
            mydata = resp
            // for (i=0;i<mydata.length;i++) {
            //     console.log("id:"+mydata[i].id + " voltage:"+ mydata[i].voltage)
            // }
            console.log(mydata)
        },
        error: function () {
            console.info("error")
        }
    });

    $("#btnConnect").click(function () {
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
        var chart2 = Highcharts.chart('container2', options2);
    })
    $("#btnDisConnect").click(function () {
        clearInterval(myTimer)
        clearInterval(myTimer2)
    })

});

//最新的数据加上标识框Toolip
function activeLastPointToolip(chart) {
    var points = chart.series[0].points;
    chart.tooltip.refresh(points[points.length -1]);
}
